<template>
  <div class="inspection-results">
    <div class="title">外出统计</div>
    <div class="chart-box">
      <v-chart :option="option" :loading="inspectionDataLoading"/>
    </div>
  </div>
</template>

<script>
import to from 'await-to-js';
import {getEmptyChartOption} from '@v2coding/elements/components/chart/utils';

export default {
  name: 'CheckInResults',

  components: {},

  props: {
    params: null,
  },

  data() {
    return {
      inspectionData: 0,
      inspectionDataLoading: false,
    };
  },

  computed: {
    option({inspectionData}) {
      if (!inspectionData) {
        return getEmptyChartOption('#333', '暂无图表数据');
      }
      var echartData = []
      inspectionData.forEach(item => {
        echartData.push({name: item.goOutTypeText, value: item.goOutCount})
      })
      echartData = echartData.filter(item => item.value !== 0)
      const dataLength = echartData.length
      const lengthMid = Math.ceil(dataLength / 2)
      let firstGroupLegend = []
      let secondGroupLegend = []
      if (dataLength > lengthMid && dataLength >= 4) {
        firstGroupLegend = echartData.slice(0, lengthMid);
        secondGroupLegend = echartData.slice(lengthMid, dataLength);
      } else {
        firstGroupLegend = echartData
      }
      if (firstGroupLegend.length === 0) {
        return getEmptyChartOption('#333', '暂无图表数据');
      }
      return {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        title: [
          {
            text: '外出次数统计',
            top: 'center',
            left: 'center',
            textStyle: {
              color: '#3D3D3D',
              fontSize: 14,
            },
          },
          {
            text: Object.values(echartData).reduce((sum, item) => sum + item.value, 0) + '次',
            top: '55%',
            left: 'center',
            textStyle: {
              color: '#3D3D3D',
              fontSize: 14,
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}次 ({d}%)'
        },
        legend: [
          {
            show: true,
            top: '15%',
            left: '5%',
            orient: 'vertical',
            itemGap: 30,
            bottom: '2%',
            data: secondGroupLegend
          },
          {
            show: true,
            top: '15%',
            right: '10%',
            orient: 'vertical',
            itemGap: 30,
            bottom: '2%',
            data: firstGroupLegend
          },
        ],
        series: {
          name: 'pie',
          type: 'pie',
          radius: ['40%', '60%'],
          roseType: 'area',
          hoverAnimation: false,
          color: ['#FF0000', '#FFC0CB', '#FF7F00', '#FFFF00',
            '#90EE90', '#00FFFF', '#0000CD', '#BA55D3',
            '#ccccff', '#4693ffd1', '#4a5531', '#314355'],
          itemStyle: {
            //饼图之间颜色
            normal: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 2,
            },
          },
          labelLine: {
            length: 10,//视觉引导线第一段的长度
            length2: 30,//视觉引导线第二段的长度
          },
          label: {
            formatter: function(params) {
              return params.value + '次'
            },
          },
          data: echartData,
          emphasis: {
            scale: true,
            itemStyle: {
              shadowBlur: 5,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
      };
    },
  },

  watch: {
    params() {
      this.getData();
    },
  },

  mounted() {

  },

  methods: {
    async getData() {
      this.inspectionDataLoading = true;
      const [, result] = await to(this.$axios.get(
          '/Go/GoOutRecord/selectGoOutRecordStatisticsVo', {params: this.params}));
      this.inspectionDataLoading = false;
      this.inspectionData = result?.success && result.data || null;
      console.log(this.inspectionData)
    },
  },
};
</script>

<style lang="less" scoped>
.inspection-results {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    flex: none;
    font-weight: 900;
    display: flex;
    align-items: center;
    color: #0054FE;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 14px;
      background: #0054FE;
      margin-right: 6px;
    }
  }

  .chart-box {
    flex: 1;
  }
}
</style>
